<template>
  <div class="">
      <a href="javascript:;" title="点击查看审核详情" v-bind:style="{color:showText.color,width:'40px','display':'inline-block'}" @click="dialogShenheLogVisibleIframe = true">{{showText.text}}</a>&nbsp;
      <el-button v-if="auth" :title="shenheTitle" :disabled='disabled' size="mini" icon="el-icon-check" type="primary" circle @click="_handleShowShenhe" style="padding:3.5px;margin-left:3px;"></el-button>
      <el-dialog
        :title="titleText"
        :fullscreen="false"
        :visible.sync="dialogShenheVisibleIframe"
        width="900px"
        top="20px"
        :before-close="handleShenheClose"
        >
        <div style="width:100%;height:500px;">
          <iframe ref='shenheIframe' width='100%' height='100%' :src="actionUrl" frameborder="0"></iframe>
        </div>
      </el-dialog>
      <el-dialog
        :title="titleText"
        :fullscreen="false"
        :visible.sync="dialogShenheLogVisibleIframe"
        width="750px"
        top="50px"
        :before-close="handleShenheClose"
        >
        <div style="width:100%;height:400px;">
          <iframe width='100%' height='100%' :src="actionUrlLog" frameborder="0"></iframe>
        </div>
      </el-dialog>
    </div>
</template>
<script type="text/javascript">
  define(['vue'],function(vue){
    //注意下面不能使用label
    return vue.component('dilog-shenhe-edit',{
      props:{
        row:{required:true},
        filed:{required:false,default:'shenhe'},
        auth:{required:false},
        tableId:{required:true},
        model:{required:true},
      },
      template:template,
      data : function() {
        return {
          dialogShenheVisibleIframe:false,
          dialogShenheLogVisibleIframe:false,
          titleText:'审核操作',
          shenheTitle:(this.row.shenheDisabled ? this.row.shenheDisabled : '审核操作'),
          disabled:(this.row.shenheDisabled ? 'disabled' : false),
          actionUrl:`?controller=Shenhe_Shenhe&action=Edit`,
          actionUrlLog:`?controller=Shenhe_Shenhe&action=Log`,
          showCount:0,
        };
      },
      methods:{
        handleShenheClose(done) {
          // console.log('close done:',this);
          done();
          this.$root._getRows();
        },
        _handleShowShenhe(){
          let that = this;
          this.showCount += 1;
          this.dialogShenheVisibleIframe = true;
          if(this.showCount > 1){
            // console.log('第加载',this.showCount);
            this.$refs.shenheIframe.contentWindow.location.reload(true);
          }
          // 外层
          var handler = function(e) {
            // console.log('listener message:',e)
            if(e.data && e.data.row.nodeName == that.model){
              if(e.data.event == 'close'){
                window.removeEventListener("message",handler ,false);
                setTimeout(() => {
                  that.dialogShenheVisibleIframe = false;
                  that.$root._getRows();
                }, 500);
              }
            }
          }
          window.addEventListener("message", handler ,false);

        }
      },
      mounted:function() {
        this.actionUrl += "&model="+this.model+"&tableId="+this.row[this.tableId];
        this.actionUrlLog += "&model="+this.model+"&tableId="+this.row[this.tableId];
      },
      computed:{
        showText: function(){
          var _showText,textColor;
          // console.log(this.filed);
          if(this.row[this.filed] == ''){
            _showText = '未审核';
            textColor = 'blue';
          }else if(this.row[this.filed] == 'yes'){
            _showText = '通过';
            textColor = 'green';
          }else if(this.row[this.filed] == 'no'){
            _showText = '不通过';
            textColor = 'red';
          }else if(this.row[this.filed] == 'ing'){
            _showText = '审核中';
            textColor = 'orange';
          }
          // console.log({text:_showText ,color:textColor});
          return {text:_showText ,color:textColor};
        }
      },
    });
  });
</script>
<style>
</style>